<template>
	<view class="user contain"> 
			<view class="mb-30   avatar relative ">
				<view class=" mt-4 ml-8 flex  ">
					<uv-avatar size="60" class="mt-2"
						default-url="https://img-qn.51miz.com/Element/00/88/08/84/72f298b9_E880884_d0f63115.png"
						:src="userInfo.userAvatar"></uv-avatar>
					<text class="  mt-8 ml-30  pl-4 ">未登录</text>
				</view>
			</view>
			<view class="rounded-2xl p-2  bg-white ml-2 mr-2 flex">
				<view  class="flex-col text-center flex-1">
					<view>积分（个）</view>
					<text class="text-red-300"  >0</text>
				</view>
				<view  class="flex-col  text-center flex-1">
					<view>集运卷（张）</view>
					<view class="text-red-300" >0</view>
				</view>
				<view  class="flex-col  text-center flex-1">
					<view>余额（元）</view>
					<view class="text-red-300" >0</view>
				</view>
			</view> 
			<view class="mt-4 ">
				<uv-list class="mt-2" v-for="(item,index) in list">
					<uv-list-item class=" rounded-4xl" v-for=" v  in item" :key="v.icon" :show-extra-icon="true"
						:extra-icon="{icon:v.icon,color:v.color}"   :title="v.title" link :to="v.url"></uv-list-item>
				</uv-list>
			</view>
			<uv-button class=" mt-8 mb-8 " :custom-style="customStyle" text="退出登录" @click="logout"></uv-button>
		</view>
</template>

<script setup>
	import store from '@/store'
	const { user } = store()
	
	const list1 = [{
			title: '我的积分',
			icon: 'red-packet',
			color: '#ff7a7a',
			url: '/pages/index/index'
		},
		{
			title: '集运卷',
			icon: 'empty-coupon',
			color: '#ff7a7a',
			url: '/pages/consolidation_voucher/consolidation_voucher'
		}, {
			title: '银行转账',
			icon: 'empty-coupon',
			color: '#92b692',
			url: '/pages/bank_transfer/bank_transfer'
		},
		{
			title: '银行流水',
			icon: 'red-packet',
			color: '#729fec',
			url: '/pages/index/index'
		},
		{
			title: '余额明细',
			icon: 'empty-search',
			color: '#729fec',
			url: '/pages/balance_details/balance_details'
		},
	]
	const list2 = [{
			title: '我的推荐',
			icon: 'account-fill',
			color: '#caecff',
			url: '/pages/index/index'
		},
		{
			title: '我的收益',
			icon: 'empty-coupon',
			color: '#ffdbb8',
			url: '/pages/index/index'
		},
		{
			title: '分享好友',
			icon: 'share-fill',
			color: '#ffaeae',
			url: '/pages/index/index'
		},
	]
	const list3 = [{
			title: '基本信息',
			icon: 'file-text-fill',
			color: '#ff7676',
			url: '/pages/index/index'
		},
		{
			title: '修改密码',
			icon: 'edit-pen-fill',
			color: '#ff6666',
			url: '/pages/index/index'
		},
		{
			title: '收货地址',
			icon: 'map-fill',
			color: '#ff6836',
			url: '/pages/index/index'
		},
	]
	const list4 = [{
		title: '帮助中心',
		icon: 'server-man',
		color: '#ffb061',
		url: '/pages/index/index'
	}, {
		title: '切换语言',
		icon: 'chat-fill',
		color: '#45b9b0',
		url: '/pages/index/index'
	}]
	const list = ref([list1, list2, list3, list4])
	
	const customStyle = computed(() => {
		return {
			height: '80rpx',
			background: '#1fd1c3',
			color: '#fff',
			borderRadius: '40rpx', //圆角
			// nvue中必须是下方的写法
			'border-top-right-radius': '40rpx',
			'border-bottom-left-radius': '40rpx',
			'border-bottom-right-radius': '40rpx'
		}
	})
	const userInfo = computed(() => { return user.userInfo })
	
	const switchChange = () => {}
	const logout = () => {
		user.LogOut()
	}
</script>

<style lang="scss" scoped>
	.user {
		background: #f2f2f2;
		overflow-y: auto;
	}

	.contain {
		background: url(@/static/img/userbg.jpg) no-repeat 0 0 #f2f2f2;
		background-size: 100% 32%;
		background-position: 0 -62px;
	}

	.avatar {
		height: 80px;
	}

	.image {
		top: -80px;
		left: 0;
		width: 100vw;
	}
</style>